<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>闲云旅游网</title>
  <style>
    * {
    margin: 0;
    padding: 0;
    }
    a {
    text-decoration: none;
    color: inherit;
}
em, i {
    font-style: normal;
}
    .header{
    display: flex;
    height: 60px;
    line-height: 60px;
    background: #fff;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 3px 0 #f5f5f5;
    box-sizing: border-box;
    }
    .el-row--flex {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
.header .el-row--flex a {
    display: block;
    padding: 0 20px;
    height: 60px;
    font-size: 20px;
    box-sizing: border-box;
}

    .logo a img{
    flex: 1;
    width: 88px;
    height: 48px;
    padding-left: 150px;
    object-fit: cover;
    display: block;
    }
    .banner-image img{
      width: 100%;
      height: 100%;
    }

    
    .container .banner-content {
    z-index: 9;
    width: 1000px;
    position: absolute;
    left: 65%;
    top: 100%;
    margin-left: -500px;
    border-top: 1px solid transparent;
}
.container .banner-content .search-bar{
    width: 552px;
    margin: 0 auto;
}
.el-row--flex {
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
}
.el-row {
    box-sizing: border-box;
}
.container .banner-content .search-tab span {
    width: 82px;
    height: 36px;
    display: block;
    position: relative;
    margin-right: 8px;
    cursor: pointer;
}
/* .container .banner-content .search-tab .active i{
    color: #333;
} */

.container .banner-content .search-tab .active i {
    color: #fff;
}
.container .banner-content .search-tab span i {
    position: absolute;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    line-height: 30px;
    text-align: center;
    color: #fff;
}
.container .banner-content .search-tab span:after {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    border: 1px solid hsla(0,0%,100%,.2);
    border-bottom: none;
    transform: scale(1.1,1.3) perspective(.7em) rotateX(
2.2deg);
    transform-origin: bottom left;
    background: rgba(0,0,0,.5);
    border-radius: 1px 2px 0 0;
    box-sizing: border-box;
}
.container .banner-content .search-input {
    width: 550px;
    height: 46px;
    background: #fff;
    border-radius: 0 4px 4px 4px;
    border: 1px solid hsla(0,0%,100%,.2);
    border-top: none;
    box-sizing: unset;
}
.el-row--flex.is-align-middle {
    align-items: center;
}
.el-row--flex {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-between;
}
.container .banner-content .search-input input {
    flex: 1;
    height: 20px;
    padding: 13px 15px;
    outline: none;
    border: 0;
    font-size: 16px;
}
.container .banner-content .search-input .el-icon-search {
    cursor: pointer;
    font-size: 22px;
    padding: 0 10px;
    font-weight: 700;
}
.el-icon-search:before {
    content: "\e778";
}
.footer-wrapper {
    display: flex;
    background: #333;
    color: #ccc;
    min-width: 1000px;
}
.footer{
    display: flex;
    padding-top: 30px;
    margin: 0 auto;
    width: 1000px;
}
.el-row {
    box-sizing: border-box;
}
.el-col-6 {
  flex: 1;
    width: 25%;
}
.el-col-offset-1 {
    margin-left: 4.16667%;
}
.info-list{
  flex:1;
} 
.info-list h5{
    font-weight: 400;
    font-size: 16px;
    margin-bottom: 10px;
}
.info-list p{
    font-size: 12px;
    line-height: 1.8;
}

.info-list p span {
    color: orange;
}
.el-col-5 {
    width: 20.83333%;
}
.scan {
    text-align: center;
    font-size: 12px;
}
.scan img {
    width: 140px;
    height: 140px;
}
.licence {
    border-top: 1px solid #666;
    margin-top: 20px;
    padding: 50px 0;
    text-align: center;
    font-size: 12px;
}
  </style>
</head>
<body>
  <div>
    <header class="header">
      <div class="main el-row is-justify-space-between el-row--flex">
      <div class="logo">
        <a href="">
          <img src="https://img0.baidu.com/it/u=1217883279,807945501&fm=26&fmt=auto" alt="">
        </a>
      </div>
      <div class="navs el-row el-row--flex">
        <a href="">首页</a>
        <a href="">房产经纪</a>
        <a href="">地产分类</a>
        <a href="">关于我们</a>
      </div>
    </div>
    </header>
    <div class="banner-image">
     <img src="https://www.bing.com/th?id=OHR.PFNPAZ_JA-JP6585211634_1920x1080.jpg&rf=LaDigue_1920x1080.jpg" alt="">
    </div>

<div class="container">
    <div class="banner-content">
      <div class="search-tab el-row el-row--flex">
        <span class="active">
          <i>搜索</i>
        </span>
      </div>
      <div class="search-input el-row is-align-middle el-row--flex">
        <input type="text" placeholder="请输入想搜索的地区" value>
        <i class="el-icon-search"></i>
      </div>
    </div>
  </div>

  <div class="footer-wrapper">
    <div class="footer">
      <div class="info-list el-row">
        <h5>abc一賽品件覺在</h5>
        <p>共同打造的上亿旅行者"旅行神器"</p>
        <p><span>60,000</span> 多个的地</p>
        <p><span>600,000</span> 个细多个全球旅地新玩法</p>
        <p><span>760,000</span> 次攻略下载</p>
        <p><span>38,000</span> 家旅游产全球旅游目品供应商</p>
      
      <div class="el-col el-col-5">
        <h5>关于我们</h5>
        <p>隐私政策 商标声明</p>
        <p>服务协议 游记协议</p>
        <p>商城平台服务协议</p>
        <p>网络信息侵权通知指引</p>
        <p>旅游旅游网服务监督员</p>
        <p>网站地图加入闲</p>
      </div>
      <div class="el-col el-col-5">
        <h5>旅行服务</h5>
        <p>旅游攻略 酒店预订</p>
        <p>旅游特价 国际租车</p>
        <p>旅游问答 旅游保险</p>
        <p>旅游指南 订火车票</p>
        <p>旅游资讯 APP下载</p>
      </div>
      <div class="scan el-col el-col-6">
        <p>
          <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.qcsdn.com%2Fimg%2F20190410%2F75849d4984055f0e7f9882b6a2da54d6.png&amp;refer=http%3A%2F%2Fpic.qcsdn.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1641508812&amp;t=5da6f1489b48b56c04bb72a4dd60c603" alt="" data-v-ac5b3aaa="">
          关注我们
        </p>
      </div>
      <div class="licence">
        京ICP备08001421号 京公网安备110108007702 Copyright © 2016-2019 博学谷 All Rights Reserved
    </div>
    </div>
  </div>
  </div>
  </div>
</body>
</html>